/* =DOCINFO
--------------------------------------------------------------------
    */

/* =COLOURS
--------------------------------------------------------------------
    #354653, #4E677A, #6788A1, #544D36, #7A694E, #A18A67, #ABABAB,
    #545454, #FFFFFF
    */


/* =IMPORT
--------------------------------------------------------------------
    Importing reset.css width thanks to Eric Meyer.
    http://meyerweb.com/eric/tools/css/reset/index.html
    */

@import url(reset.css);

/* =GLOBAL
--------------------------------------------------------------------
    Global definitions for main elements and parts of the website.
    */

body, html {
    font-family: 'Lucida Grande', arial, sans-serif;
    font-size: 12px;
    background-color: #333;
}

/* Layout width: */
.column {
    margin: 0 0 0 15em;
    width: 42em;
    padding: 0 0 0 4em;
}

#footer .column {
    width: 64em;
    margin: 0 0 0 2em;
}

/* =SUBSCRIBE
--------------------------------------------------------------------
    */

#subscribe {
    font-size: .9em;
    background: #fff;
    padding: .5em 1em;
    text-align: right;
    color: #999;
    overflow: hidden;
}

    #subscribe a {
        display: block;
        float: right;
        background: url(../gfx/feed-icon-14x14.png) 0 .08em no-repeat;
        padding: .2em 0 .2em 2em;
        text-decoration: none;
        color: #999;
    }

    #subscribe a:hover,
    #subscribe a:focus {
        color: #666;
    }

/* =HEADER
--------------------------------------------------------------------
    */

#header {
    background: #fff;
    padding: 6em 0 3em 0;
}

    #header h1 {
        font-weight: normal;
    }

    #header .blogtitle {
        background: url(../gfx/logo-hasematzel-2.gif) 0 0 no-repeat;
        font-size: 1.5em;
        text-transform: lowercase;
    }

    #header .blogtitle a {
        background: url(../gfx/logo-hasematzel-2.gif) 0 0 no-repeat;
        display: block;
        color: #6788A1;
        text-decoration: none;
        width: 10.5em;
        height: 2.5em;
    }

    #header .blogtitle a:hover {
        background: url(../gfx/logo-hasematzel-3.gif) 0 0 no-repeat;
        display: block;
        color: #6788A1;
        text-decoration: none;
        width: 10.5em;
        height: 2.5em;
    }

    #header .blogtitle span {
        margin-left: -9999px;
    }

    #header .blogdescription {
        display: none;
        color: #aaa;
        padding: 0 .2em 1em .2em;
    }

/* =NAVIGATION
--------------------------------------------------------------------
    */

#navigation {
    /*display: none;*/
}

/* =ABOUT
--------------------------------------------------------------------
    */

#about {
    background: #ffc;
    border-bottom: 1px solid #999;
}

    #about * {
        padding: 1em 0;
    }

/* =CONTENT
--------------------------------------------------------------------
    */

#content {
    background: #fff;
    padding: 3em 0 0 0;
}

/* =POST
--------------------------------------------------------------------
    */

.post {
    position: relative;
    margin: 2em 0 0 0;
    padding: 0 0 6em 0;
}

    h2 {
        font-size: 2.3em;
        font-weight: normal;
        line-height: 1.2em;
        margin: .5em 0 1em 0;
    }
    
    .post h2 a {
        color: #354653;
        text-decoration: none;
    }
    
    .post h2 a:hover,
    .post h2 a:focus {
        background: #eee;
    }
    
    .post h2 span {
        color: #999;
        font-size: .4em;
        font-style: italic;
        padding-left: .5em;
    }
    
    .post h2 span a {
        color: #999;
    }

    .post .meta {
        color: #ABABAB;
        position: absolute;
        top: 1.3em;
        left: -5em;
        font-style: italic;
        text-align: right;
    }

/* =ENTRY
--------------------------------------------------------------------
    */

.entry {
    color: #555;
    line-height: 1.6666667em;
}

    .entry h3,
    .entry h4,
    .entry p,
    .entry ul,
    .entry ol,
    .entry blockquote {
        margin: 1.5em 0 1em 0;
    }
    
    .entry a {
        color: #354653;
    }
    
    .entry a:hover,
    .entry a:focus {
        background: #eee;
    }

    .entry ul {
        list-style: square;
        margin: 0 0 0 2em;
    }

    .entry ol {
        list-style: decimal;
        margin: 0 0 0 2.5em;
    }

    .entry h3 {
        color: #ABABAB;
        font-weight: normal;
        font-size: 1.5em;
    }

    .entry h4 {
        color: #ABABAB;
        font-size: 1.2em;
    }

    .entry blockquote {
        color: #666;
        font-style: italic;
        padding: 0 2em;
    }

    /* Taken from: http://reference.sitepoint.com/css/content */
    .entry blockquote p {
        quotes: "\201c" "\201d";
    }

    .entry blockquote p::before {
        content: open-quote;
    }

    .entry blockquote p::after {
        content: close-quote;
    }

    .entry pre {
        background: #eee;
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        padding: .7em;
    }

    .entry img {
        border: .0833em solid #ccc;
        padding: .1667em;
    }

.wp-pagenavi {
    padding: 0 0 3em 0;
}

#meta {
    background: #eee;
    border-top: 1px solid #ccc;
    padding: 1em 0;
    line-height: 2em;
    color: #999;
}

    #meta a {
        color: #4E677A;
    }

    #meta a:hover,
    #meta a:focus {
        background: #333;
        color: #ccc;
    }

/* =ARCHIVE
--------------------------------------------------------------------
    */

.archive {
    line-height: 2em;
    padding: 0 0 4em 0;
}

    .archive .clearfix {
        clear: left;
        padding: 0 0 4em 0;
    }
        
    .archive h3 {
        color: #354653;
    }
    
    .archive li {
        color: #999;
        display: block;
        float: left;
        padding: 0 2em 0 0;
    }
    
    .archive a {
        color: #4E677A;
    }
    
    .archive a:hover,
    .archive a:focus {
        color: #7A694E;
        background: #eee;
    }

/* =COMMENTS
--------------------------------------------------------------------
    */

#discussion {
    background: #ddd;
    border-top: .0833em solid #ccc;
    padding: 3em 0;
}

#discussion h3 {
    color: #4E677A;
    font-size: 2em;
    font-weight: normal;
}

.trackbacks {
    padding: 1em 0;
    line-height: 2em;
}

    .trackbacks li {
        background: url(../gfx/trackback.png) 0 .4em no-repeat;
        padding: 0 0 0 2.5em;
    }

    .trackbacks li a {
        color: #354653;
    }

.commentlist {}

    .commentlist li {
        position: relative;
        margin: 2em 0 3em 0;
        line-height: 1.5em;
    }

    .commentlist li a {
        color: #354653;
    }

    .commentlist .commentmeta {
        position: absolute;
        font-family: 'Lucida Grande', verdana, sans-serif;
        font-size: .9em;
        top: 0;
        left: -10em;
        background: #ddd url(../gfx/arrow-3.gif) top right no-repeat;
        width: 10em;
    }

    .commentlist .commentmeta a {
        text-decoration: none;
    }

    .commentlist .commentmeta a:hover,
    .commentlist .commentmeta a:focus {
        text-decoration: underline;
    }

    .commentlist .avatar {
        border: 1px solid #999;
        padding: .1667em;
    }

    .commentlist .commententry {
        border-top: 1px solid #bbb;
        background: #eee;
        padding: 1.5em;
    }

    .commentlist .commententry p {
        margin: 0 0 1em 0;
    }

#respond {
    line-height: 2em;
}

    #respond h3 {
        margin: 0 0 1em 0;
    }
    
    #respond p {
        color: #666;
        margin: 1em 0;
    }


/* =FOOTER
--------------------------------------------------------------------
    */

#tagcloud {
    background: #eee;
    border-top: 1px solid #ABABAB;
    display: none;
    color: #999;
    padding: 2em 0;
    line-height: 2em;
}

    #tagcloud a {
        color: #4E677A;
        text-decoration: none;
    }

    #tagcloud a:hover,
    #tagcloud a:focus {
        background: #999;
        color: #fff;
    }

    #tagcloud ul {
        margin: 0 .089em;
    }

    #tagcloud li {
        display: inline;
    }

#info {
    background: #6788A1;
    border-top: 1px solid #666;
    color: #fff;
    padding: 2em 0;
    line-height: 2em;
}

#footer {
    background: #333;
    border-top: 1px solid #222;
    color: #aaa;
    padding: 2em 0;
    line-height: 2em;
}

    #tagcloud h3,
    #info h3,
    #footer h3 {
        font-weight: normal;
        font-size: 1.5em;
        line-height: 1.3333em;
    }

    #footer a {
        color: #6788A1;
    }

    #footer a:hover,
    #footer a:focus {
        color: #ABABAB;
    }

    #footer ul {
        margin-bottom: 2em;
    }

    #recent li {
    }

    #footer li span {
        font-style: italic;
    }

    #footer .box {
        float: left;
        width: 12em;
        margin: 0 1em 0 0;
    }
    
    #footer .boxalt {
        float: left;
        width: 24em;
        margin: 0 1em 0 0;
    }
    
    #footer .boxalt li {
        margin: .666667em 0;
    }

    #footer .clearfix {
        clear: left;
    }